<template>
    <div class="sub-page">
      <div class="tree-parser">
        <TreeParser :treeData="treeData" />
      </div>
      <div class="sheet-tabs">
        <button
          v-for="(sheet, index) in sheets"
          :key="index"
          @click="activeSheet = index"
        >
          {{ sheet.name }}
        </button>
        <div class="sheet-content">
          {{ sheets[activeSheet].content }}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import TreeParser from './TreeParser.vue';
  
  export default {
    name: 'SubPage',
    components: {
      TreeParser,
    },
    data() {
      return {
        treeData: [
          {
            id: 1,
            name: 'Root',
            children: [
              { id: 2, name: 'Child 1' },
              { id: 3, name: 'Child 2' },
            ],
          },
        ],
        sheets: [
          { name: 'AI团队', content: 'AI团队相关内容' },
          { name: '插件', content: '插件相关内容' },
          { name: '日志', content: '日志相关内容' },
          { name: '任务队列', content: '任务队列相关内容' },
        ],
        activeSheet: 0,
      };
    },
  };
  </script>
  
  <style scoped>
  .sub-page {
    display: flex;
    height: 100vh;
  }
  
  .tree-parser {
    width: 70%;
    background: #f5f5f5;
    padding: 20px;
    overflow: auto;
  }
  
  .sheet-tabs {
    width: 30%;
    background: #e0e0e0;
    padding: 20px;
  }
  
  .sheet-tabs button {
    margin: 5px;
    padding: 10px;
    background: #fff;
    border: none;
    cursor: pointer;
  }
  
  .sheet-content {
    margin-top: 20px;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
  }
  </style>